<template>
    <div class="d-flex flex-column" style="background-color: #f6f7f9; height: var(--layout-height); min-height: 740px">
        <!--bannger图-->
        <div style="width: 100%; overflow: hidden">
            <img src="../images/personalCenter.png" class="w-100 vertical-align-top" />
        </div>
        <!--信息&简历-->
        <div class="w-100 d-flex-between-center mt-20" style="height: 280px">
            <div class="flex-1 mr-12 h-100 d-flex-between-center" style="background-color: #fff; border-radius: 6px">
                <div class="position-relative mr-20 h-100 d-flex-center px-20">
                    <img src="../images/profilePicture.png" width="130px" height="170px" />
                    <div class="in-job-hunting position-absolute">求职中</div>
                </div>
                <div class="flex-1 h-100 d-flex align-items-center">
                    <div class=" " style="min-height: 170px">
                        <div>
                            <span class="mr-16 fs24" style="font-weight: bold">郭冬临</span>
                            <img src="../images/editMessage.png" width="16px" height="16px" style="cursor: pointer" class="debugger-bor" @click="skipEdit" />
                        </div>
                        <div class="mt-12 fs-14" style="color: #999999">
                            <span>男&nbsp;汉族&nbsp;1988-08--16&nbsp;党员&nbsp;生源地（未填写）</span>
                        </div>
                        <div class="mt-16 fs-14">手机号码：123412312312</div>
                        <div class="fs-14 mt-8" style="color: #999999">
                            <div style="color: #999999">电子邮箱：123412312312@qq.com</div>
                            <div class="fs-14 d-flex mt-8" style="color: #999999">
                                <div>教育背景：</div>
                                <div>
                                    <span>2023.03 _ 2025.07&nbsp;研究生&nbsp;河南大学</span>
                                    <br />
                                    <span>2023.03 _ 2025.07&nbsp;研究生&nbsp;河南大学</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1 h-100" style="background-color: #fff; border-radius: 6px">
                <div class="d-flex-between-center px-16" style="height: 40px; border-bottom: 1px solid #e8edf4">
                    <div class="fs-16" style="color: #3a3b3b; font-weight: bold">我的简历</div>
                    <div style="font-size: 14px; color: #1677ff">查看</div>
                </div>
                <div class="d-flex-between-center px-12">
                    <div class="d-flex-center flex-column" style="height: 240px; width: 150px">
                        <i-circle :percent="80">
                            <span style="font-size: 24px">80%</span>
                        </i-circle>
                        <div class="fs-14 mt-12" style="color: #71747b">简历完整度</div>
                    </div>
                    <div class="flex-1 ml-20" style="display: grid; grid-row-gap: 40px; grid-template-columns: repeat(2, 1fr)">
                        <div v-for="item in 4" :key="item" class="biographical-notes">
                            <div class="fs-16" style="color: #71747b">已投递</div>
                            <div class="fs-26" style="color: #1677ff">3</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--匹配职位&消息中心-->
        <div class="w-100 mt-20 overflow-hidden position-relative flex-1">
            <div class="position-absolute wh-100 d-flex">
                <div class="flex-1 mr-12 h-100" style="background-color: #fff; border-radius: 6px">
                    <div class="fs-16 px-12 w-100" style="height: 40px; border-bottom: 1px solid #e8edf4; color: #3a3b3b; font-weight: bold; line-height: 40px">猜与你匹配的职位</div>
                    <div class="w-100" style="height: calc(100% - 40px); overflow: auto">
                        <div class="w-100 mt-12 px-12 d-flex-between-center" v-for="item in 10" :key="item">
                            <div class="d-flex align-items-center">
                                <img src="../../../assets/qr.png" width="80px" height="80px" />
                                <div class="ml-12" style="height: 80px">
                                    <div style="font-size: 14px; color: #333; font-weight: bold">咨询专员</div>
                                    <div style="font-size: 12px; color: #999999; margin-top: 8px">软件开发 ｜ 软件外包 ｜ 系统集成 民营 50-150人</div>
                                    <div style="font-size: 12px; color: #999999">河南哈里微盒子信息科技有限公司</div>
                                </div>
                            </div>
                            <div>⟩</div>
                        </div>
                    </div>
                </div>
                <div class="flex-1 h-100" style="background-color: #fff; border-radius: 6px">
                    <div class="fs-16 px-12" style="height: 40px; border-bottom: 1px solid #e8edf4; color: #3a3b3b; font-weight: bold; line-height: 40px">消息中心</div>
                    <div style="height: calc(100% - 40px); overflow: auto">
                        <div v-for="item in 10" :key="item" class="d-flex-between-center pl-12 pr-20" style="height: 50px">
                            <div class="d-flex align-items-center">
                                <div class="d-flex-center" style="width: 17px; height: 17px; border-radius: 50%; background-color: rgba(243, 248, 255, 0.5)">
                                    <div style="width: 8px; height: 8px; border-radius: 50%; background-color: #006ff0"></div>
                                </div>
                                <div style="font-size: 14px; color: #3a3b3b" class="ml-12">毕业去向登记 待填报</div>
                            </div>
                            <div>⟩</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        skipEdit: function () {
            this.$router.push({
                name: 'EditViewResume'
            });
        }
    }
};
</script>

<style scoped>
.in-job-hunting {
    width: 100px;
    height: 35px;
    background: linear-gradient(to right, #f7c462, #e53223);
    color: #fffcfc;
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    border-radius: 4px;
    bottom: 28px;
    left: 33px;
}

.biographical-notes {
    width: 160px;
    height: 60px;
    border: 1px solid #e8edf4;
    background-image: url('../../../assets/xytitle.png');
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}
</style>
